<template>
  <div>
    <div class="right">
        <div class="rightTop">
            <img src="../assets/page.png" alt="找不到图片">
            <span class="summarize">
                页面
            </span>
        </div>
        <div class="settingTitleArae">
            <div :class='{"settingTitle":true,"selected":isSelected}' @click="select">属性</div>
            <div :class='{"settingTitle":true,"selected":!isSelected}' @click="select">样式</div>
        </div>
        <!-- <keep-alive>
        <textAttributionVue  v-if="isSelected&&views.length!=0" :views="views" :currView="currView"></textAttributionVue>
        </keep-alive>
        <keep-alive>
        <textStyleVue v-if="!isSelected&&views.length!=0" :views="views" :currView="currView"></textStyleVue>
        </keep-alive> -->
        
        <div v-for="item in views" :key="item.id">
        <!-- <component 
        :views="views" 
        :is="view.attributionVue" 
        :currView="currView" 
        v-if="isSelected&&views.length!=0">
        </component>
        <component 
        :views="views" 
        :is="view.StyleVue" 
        :currView="currView"
        v-if="!isSelected&&views.length!=0">
        </component> -->
        <component 
        :views="views" 
        :is="view.attributionVue" 
        :currView="currView" 
        v-if="isSelected&&item.length!=0&&currView.id===item.id">
        </component>
        <keep-alive>
        <component 
        :views="views" 
        :is="view.StyleVue" 
        :currView="currView"
        v-if="!isSelected&&item.length!=0&&currView.id===item.id">
        </component>
        </keep-alive>
        </div>
    </div>
  </div>
</template>

<script>
import textAttributionVue from './attribution/textAttributionVue.vue';
import textStyleVue from './style/textStyleVue.vue';
export default {
    name:"rightVue",
    data(){
        return{
            isSelected:true,
            views:[],
            currView:{},
            view:{}
        }
    },
    methods:{
        select(){
           this.isSelected=!this.isSelected;
        },
         receiveViews(views){
            this.views=views;
        },
        receiveAview(view){
            console.log("receiveAview");
            this.view=view;
        },
        receiveCruuViews(currView){
            console.log("receiveCruuViews");
            this.currView=currView;
        },
        // receiveViewId(id,StyleVue,attributionVue){

        // }
    },
    components:{
        textStyleVue,
        textAttributionVue
    },
    mounted(){
        this.$bus.$on("giveViews",this.receiveViews);
        this.$bus.$on("giveView",this.receiveAview);
        this.$bus.$on("giveCruuViews",this.receiveCruuViews)
    },
    watch:{
        views:{
            immediate:true,
            handler(){
                this.$bus.$on("receiveViewId",this.receiveViewId)
            }
        }
    }
}
</script>

<style scoped>
.right {
  width: 350px;
  height: 600px;
  border-right: 2px solid #f4f4f4;
}
.rightTop{
    width: 100%;
    height: 25px;
}
img{
    float: left;
    width: 15px;
    height: 15px;
    margin: 5px;
    flex-shrink: 0;
}
.summarize{
    float: left;
    font-size: 12px;
    color: #aaa;
    line-height: 25px;
}
.settingTitleArae{
    display: flex;
    width: 100%;
    height: 40px;
}
.settingTitle{
    flex: 1;
    line-height: 40px;
}
.selected{
    border-bottom: 2px solid #409eff;
}
</style>